<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  *{
    padding: 0;
    margin: 0px;
    box-sizing: border-box;
  }
  body{
    display: block;
    width: 100vw;
    height: 10vh;
    /* background: url(./img/1.jpg) no-repeat center center; */
    background-image: linear-gradient(to right, #FFD700, #FFA726);
    /* background: linear-gradient(90deg,#edc0bf 0 ,#c4caef 58%); */
  }
  section{
    width: auto;
    height: auto;
    padding: 30px;
    background: #ffffff4d;
    backdrop-filter: blur(25px);
    border-radius: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .city{
    font-size: 2rem;
  }
  .info{
    display: flex;
    width: 100%;
    border: 1px solid black;
    border-radius: 20px;
    overflow: hidden;
    height: 40px;
  }
  .info input{
    background: transparent;
    border: none;
    width: 90%;
  }
  .info .sbm{
    width: 10%;
    margin: 0;
    padding: 0;
    background: #ffffff4d;
    height: 100%;
    border: none;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }
  ul{
    width: 100%;
    height: auto;
    text-align: center;
    list-style: none;
  }
  ul .city{ 
    font-size: 2rem;
  }
  ul .temperature{
    font-size: 3rem;
  }
</style>
<body>
    <a style="text-decoration: none;" href="https://gitee.com/tian158/task" target="_blank">仓库地址</a>
  <section>
    <form class="info" autocomplete="off">
      <input type="text" name="city" class="city">
      <button class="sbm">提交</button>
    </form>
      <ul>
        <!-- <li class="province">广东</li>
        <li class="city">顺德区</li>
        <li class="temperature">29&#x00B0;C</li>
        <li class="weather">多云</li>
        <li>风向：南</li>
        <li>风力级别：≤3级</li>
        <li>空气湿度：82%</li>
        <li>数据发布的时间：2024-06-02 23:30:36</li> -->
  </ul>
  </section>
  <script>
    const ul = document.querySelector('ul')
    const info = document.querySelector('.info')
    const sbmcity = document.querySelector('.city')
    function getWeather(city = "顺德") {
      const mykey = "	ab01ab2bf66601714c7b32b4c1f6b15d"
      const apiURL = `https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=${mykey}`

      fetch(apiURL)
        .then(response => response.json())
        .then(function ({ lives }) {
          // console.log(data)
          console.log(lives)
          if (lives.length !== 0 && lives[0].length !== 0) {
            ul.innerHTML = `
              <li class="province">${lives[0].province}</li>
              <li class="city">${lives[0].city}</li>
              <li class="temperature">${lives[0].temperature}&#x00B0;C</li>
              <li class="weather">天气：${lives[0].weather}</li>
              <li>风向：${lives[0].winddirection}</li>
              <li>风力级别：${lives[0].windpower}</li>
              <li>空气湿度：${lives[0].humidity}%</li>
              <li>数据发布的时间：${lives[0].reporttime}</li>
        `
          }
          else{
            alert(`查询失败`)
          }
        })
    }
    getWeather()
    info.addEventListener('submit', function (e) {
      e.preventDefault()
      if (sbmcity.value !== '') {
        console.log(sbmcity.value)
        getWeather(sbmcity.value)
        sbmcity.value =  ''
      }
      else {
        alert(`请输入想要搜素的城市`)
      }
    })
  </script>
</body>

</html>